<template>
    <div class="mt-4">
        <el-input v-model="input" placeholder="请输入" class="input-with-select" style="width: 60%;margin-left: -615px;">
            <template #prepend>
                <el-select id="select" v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="id" value="id" />
                    <el-option label="name" value="name" />
                </el-select>
            </template>
            <template #append>
                <el-button @click="search">
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
            </template>
        </el-input>
        <el-descriptions class="margin-top" title="教师信息" column="1" size="large" border style="width: 60%;">
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        id
                    </div>
                </template>
                {{ Data.id }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        name
                    </div>
                </template>
                {{ Data.name }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        gender
                    </div>
                </template>
                {{ Data.gender }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location />
                        </el-icon>
                        age
                    </div>
                </template>
                {{ Data.age }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets />
                        </el-icon>
                        subject
                    </div>
                </template>
                {{ Data.subject }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script>
import axios from "axios"
import { Search } from "@element-plus/icons-vue"
import {
    Iphone,
    Location,
    OfficeBuilding,
    Tickets,
    User,
} from '@element-plus/icons-vue'
export default {

    components: {
        Search
    },
    data() {
        return {
            Data: [{
                id: "",
                name: "",
                age: "",
                gender: "",
                subject: ""
            }],
            searchKey: "",
            searchValue: "",
            select: "选择",
            input: "",
        }
    },
    methods: {
        search() {
            this.searchKey = document.getElementById("select").value;
            let searchURL;
            if (this.searchKey == "id") {
                searchURL = "/api/teacher/query/" + this.input;
                axios.get(searchURL)
                    .then(res => {
                        console.log("提交成功", res.data);
                        this.Data = res.data;
                    })
                    .catch(error => {
                        console.error("发送失败", error);
                    })
            }

            if (this.searchKey == "name") {
                searchURL = "/api/student/selectByName";
                let name = this.input;
                axios.get(searchURL + "?name=" + name)
                    .then(res => {
                        console.log("提交成功", res.data);
                        this.tableData = res.data;
                    })
                    .catch(error => {
                        console.error("发送失败", error);
                    })
            }
            if (this.searchKey == "phonenumber") {
                searchURL = "/api/student/selectByPhonenumber";
                let phonenumber = this.input;
                axios.get(searchURL + "?phonenumber=" + phonenumber)
                    .then(res => {
                        console.log("提交成功", res.data);
                        this.tableData = res.data;
                    })
                    .catch(error => {
                        console.error("发送失败", error);
                    })
            }
        }
    }


}

</script>

<style scoped>
#input {
    display: flex;
    justify-content: flex-start;
}

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>